<template>
    <div>
        <!--普通公众号二维码-->
        <div ref="jsQrCodeDialog" id="qrCodeDialog" class="new-year-code" style="display: none;">
            <img class="new-year-code-bg" v-lazy="staticImageUrl('images/icon_gongzhonghao_nor@3x.png')" alt="">
            <!--二维码-->
            <span class="new-year-code-img-wrap">
                <span class="new-year-code-bgwhite"
                      style="padding: 5px 0;width:118px;margin-left: 50%;transform: translate(-50%);">
                    <div id="storeWxPubCode" class="store_code_img">
                        <img style="border: 1px solid #FFFFFF;border-radius: 3px;position: absolute;top: 50%;transform: translate(-50%,-50%);"
                             width="25" height="25"
                             :src="wxPubQrcode.headImg"/>
                    </div>
                </span>
            </span>
            <img style="position: absolute;left: 0;top: 0;" width="100%" height="100%"
                 src="../../assets/images/common/bg_transparent.png"/>
            <!--文字-->
            <span>
            <!--<h2 class="new-year-public-code">关注公众号</h2>-->
            <p class="new-year-order-text">需实时了解本次活动进展</p>
            <p ref="jsQrcodeOperate" id="qrcodeOperate" class="new-year-discern-code">（请扫二维码关注）</p>
        </span>
            <!--关闭蒙版的×按钮-->
            <img class="icon-white-cuo" @click="closeWxPubQrCode" src="../../assets/images/common/icon_white_cuo.png"
                 style="left: 50%;transform: translateX(-50%);"/>
        </div>
        <!--蒙版-->
        <div ref="jsWxPubQrcodeComBlack" id="wx_pub_qrcode_com_black" class="hide_com_buy com_black"
             style="display: none;"></div>

        <!--助力红包公众号二维码-->
        <div ref="jsPrizeQrCode" class="wprize-wxCode" id="prizeQrCode" style="display: none;">
            <span class="wprize-wxCode-img">
                <div id="wxRedPacketQrcode" class="wprize-wxCode-img"></div>
            </span>
            <img style="position: absolute;left: 0;top: 0;" width="100%" height="100%"
                 src="../../assets/images/common/bg_transparent.png"/>

            <p class="prize-getPack-text">扫码关注公众号领微信红包</p>
            <img class="icon-white-cuo" @click="alertHide"
                 src="../../assets/images/common/icon_white_cuo.png" style="left: 50%;transform: translateX(-50%);"/>
        </div>
    </div>
</template>

<script>
    import browser from '../../../static/js/browser'
    import  QRCode from 'qrcodejs2'
    export default {
        updated(){
            if (browser.is_weixin()) {
                this.$refs.jsQrcodeOperate.innerText = "（请扫二维码关注）"
                $("#qrcodeOperate").text("（请扫二维码关注）");
            } else {
                this.$refs.jsQrcodeOperate.innerText = "（保存图片后至微信扫一扫）"
            }
            new QRCode('storeWxPubCode',{
                render: "div",
                correctLevel: 0,
                width: 100,
                height: 100,
                text: this.shareBody.wxPubQrcode.url,
                src: this.shareBody.wxPubQrcode.headImg
            })
            if (this.wxPubRedPacket.length > 0) {
                new QRCode('wxRedPacketQrcode',{
                    render: "div",
                    correctLevel: 0,
                    width: 250,
                    height: 250,
                    text: this.wxPubRedPacket.redQrcodeUrl
                })
            }
        },
        props: {
            wxPubQrcode: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            wxPubRedPacket: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        methods: {
            showWxPubQrCode(){
                if (!this.wxPubRedPacket) {
                    this.$refs.jsWxPubQrcodeComBlack.style.display = "block"
                    this.$refs.jsQrCodeDialog.style.display = "block"
                } else {
                    this.$refs.jsPrizeQrCode.style.display = "block"
                }
            },
            closeWxPubQrCode() {
                if (!this.wxPubRedPacket) {
                    this.$refs.jsWxPubQrcodeComBlack.style.display = "none"
                    this.$refs.jsQrCodeDialog.style.display = "none"
                } else {
                    this.$refs.jsPrizeQrCode.style.display = "none"
                }
            },
            alertHide(){
                this.$refs.jsPrizeQrCode.style.display = "none"
                this.$refs.jsWxPubQrcodeComBlack.style.display = "none"
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import url($css_root + 'css/retail-goodsDetails.css');
</style>
